<!--
 * @Author: jhw
 * @Date: 2025-08-07 15:39:03
 * @LastEditors: jhw
 * @LastEditTime: 2025-08-15 10:26:13
 * @Description:
-->
<template>
  <div>
    <div class="flex flex-wrap justify-between">
      <BaseComItem
        v-for="item in EditorItemConfig"
        :key="item.materialName"
        :item="item"
        draggable="true"
        @dragstart="(event: DragEvent) => handleDragStart(event, item)"
        @dragend="handleDragEnd"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import BaseComItem from '@/components/Editor/BaseComItem.vue';
import { EditorItemConfig } from '@/configs/EditorItemConfig';
import type { MaterialItem } from '@/types';
import { useRoute } from 'vue-router';

const route = useRoute();
const type = route.query.type as string; // 问卷类型

const handleDragStart = (event: DragEvent, item: MaterialItem) => {
  if (type === 'detail') return; // 详情页不拖拽
  if (event.dataTransfer) {
    event.dataTransfer.setData('application/json', JSON.stringify(item)); // 设置拖拽数据
    event.dataTransfer.effectAllowed = 'copy'; // 设置拖拽效果
  }
  console.log('drag start', item);
};

const handleDragEnd = () => {
  console.log('drag end');
};
</script>

<style scoped></style>
